<template>
  <el-dialog :fullscreen="fullscreen" class="ff-window" draggable
             align-center :width="width" destroy-on-close append-to-body
             v-model="visible" :show-close="false" @closed="closed"
             @keydown.enter.prevent="enter">
    <template #header="{ close, titleId, titleClass }">
      <div class="ff-window-header">
        <div class="ff-window-header-title"
             @dblclick="toggleFullscreen">
          <slot name="header">
            <el-text truncated>
              {{ header }}
            </el-text>
          </slot>
        </div>
        <div class="buttons-wrapper">
          <el-button v-show="!disableFullScreen" text
                     @click="toggleFullscreen">
            <el-icon>
              <FullScreen/>
            </el-icon>
          </el-button>
          <el-button @click="close" type="warning" text>
            <el-icon>
              <Close/>
            </el-icon>
          </el-button>
        </div>
      </div>
    </template>
    <template v-slot:default>
      <div class="f-modal-body"
           :class="{'f-modal-fullscreen-body': fullscreen, 'f-modal-small-body': !fullscreen}">
        <template v-if="$slots['contentHeader']">
          <div class="f-modal-content-wrapper">
            <div class="f-modal-content-header">
              <slot name="contentHeader"/>
            </div>
            <div class="f-modal-content-body">
              <div :style="bodyStyle">
                <slot name="contentBody"/>
                <slot/>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="f-modal-content-body"
               :style="bodyStyle">
            <slot/>
          </div>
        </template>
      </div>
    </template>

    <template v-slot:footer>
      <div class="footer">
        <slot name="footer">
          <el-button @click="cancel" type="warning" round icon="cancel" :loading="isLoading">取消</el-button>
          <el-button @click="ok" type="primary" round icon="ok" :loading="isLoading">确定</el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {Close, FullScreen} from '@element-plus/icons-vue';
import {guid, isEmpty} from '@/utils/CommonUtils';

let modalStack = [];
export default {
  name: "FModal",
  props: {
    loading: {
      type: Boolean,
      default: undefined
    },
    header: {
      type: String,
      default: 'header'
    },
    width: {
      type: [String, Number],
      default: '50%'
    },
    disableFullScreen: {
      type: Boolean,
      default: false
    },
    bodyHeight: {
      type: [String, Number],
      default: 'auto'
    }
  },
  data() {
    return {
      uuid: undefined,
      Close,
      FullScreen,
      visible: false,
      fullscreen: false
    };
  },
  methods: {
    open() {
      this.visible = true;
      // this.bindEnter();
      return new Promise(resolve => {
        this.$nextTick(() => {
          resolve();
        });
      });
    },
    bindEnter() {
      this.uuid = guid();
      $(document).on('keydown', this.enterKeyDown);
      modalStack.push(this.uuid);
    },
    enterKeyDown(e) {
      if (e.key === 'Enter') {
        if (this.uuid === modalStack[modalStack.length - 1]) {
          e.stopPropagation();
          e.preventDefault();
          this.$emit('ok');
          modalStack.pop();
        }
      }
    },
    unBindEnter() {
      $(document).unbind('keydown', this.enterKeyDown);
    },
    toggleFullscreen() {
      if (this.disableFullScreen) return;
      this.fullscreen = !this.fullscreen;
      this.$emit('fullscreenChange', this.fullscreen);
    },
    close() {
      this.visible = false;
    },
    closed() {
      this.unBindEnter();
      this.fullscreen = false;
      let index = modalStack.findIndex(m => m === this.uuid);
      if (index !== -1) {
        modalStack.splice(index, 1);
      }
    },
    cancel() {
      this.close();
      this.$emit('cancel');
    },
    ok() {
      this.$emit('ok');
    },
    enter() {
      if(this.loading) return;
      this.$emit('ok');
    },
    getHeight(height) {
      try {
        return `${parseInt(height)}px`;
      } catch (e) {
      }
      return height;
    },
  },
  computed: {
    isLoading() {
      if(this.loading === undefined) return false
      return this.loading;
    },
    bodyStyle() {
      if (this.fullscreen) {
        return {
          height: '100%',
          overflow: 'auto'
        };
      } else {
        if (isEmpty(this.bodyHeight)) return '';
        return {
          height: this.getHeight(this.bodyHeight),
          overflow: 'auto'
        };
      }
    },
  }
};
</script>

<style>
.ff-window {
  border-radius: 6px;
  padding: 0 0 50px 0;
}

.ff-window .buttons-wrapper {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  text-align: right;
}

.ff-window .el-dialog__header {
  padding: 0;
  margin: 0;
}

.ff-window .el-dialog__header .el-button {
  margin: 0;
}

.ff-window-header {
  height: 35px;
  position: relative;
  border-bottom: 1px solid #dcdfe6;
}

.ff-window-header-title {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ff-window .el-dialog__body {
  padding: 10px;
}

.footer {
  border-top: 1px solid #dcdfe6;
  margin-top: 5px;
  text-align: right;
  padding: 5px 10px;

}

.ff-window .el-dialog__footer {
  padding: 0;
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.f-modal-body {
  padding: 0;
  overflow: auto;
}

.f-modal-fullscreen-body {
  height: calc(100vh - 108px);
}

.f-modal-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.f-modal-content-header {
  height: fit-content;
}

.f-modal-content-body {
  flex: 1;
  overflow: auto;
}
</style>
